
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商家信息</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<meta charset="UTF-8">
<!--
单页应用， 所有功能集成在当前页面
一般对数据的操作就是  增，删，改，查
1   打开该页时自动访问后端controller得到列表数据【查】
2   点击具体按钮时访问后端controller 执行操作【增，删，改】
3   利用DOM（不刷新页面修改页面局部内容）
4   利用异步网络请求ajax（不刷新页面在浏览器后台发送HTTP请求）
-->
<div id="WyxresLook" >
    <table class="table table-primary table-hover table-striped" >
        <thead>
        <tr>
            <th>商家序号</th>
            <th>商家账号</th>
            <th>商家密码</th>
            <th>商家名</th>
            <th>商家地址</th>
            <th>商家权限</th>
        </tr>
        </thead>
        <tbody id="display">
        <!--    下面只是限定一个格式，并不会真的显示-->
        <tr>
<!--            <td><input type="checkbox" name="dids"></td>-->
            <td>rid</td>
            <td>rusername</td>
            <td>rpass</td>
            <td>rname</td>
            <td>raddress</td>
            <td>rpermission</td>
            <td>ruptime</td>
            <td>
<!--               删除按钮  修改权限按钮-->
                <button class="btn btn-info">修改权限</button>
                <button class="btn btn-danger" >删除商家</button>
            </td>
        </tr>

        </tbody>
    </table>

</div>


<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.js"></script>

<script>
    //页面加载时
    $(document).ready(function () {
        //访问所有商家数据
        $.ajax({
            url:"WyxAdministor/resLook",
            dataType:"json",
            success:function(ret){
                console.log(ret);
                //将数据渲染到页面中
                $("#display").empty();//先清空原始内容
                let restaurant = ret.dataZone.Wyxreslist;
                //开始循环遍历
                $.each(restaurant,function(index,item){
                    //遍历一次创建一个行
                    var rTr = $("<tr></tr>");
                    //依次构建单元格td
                    var ridTd = $('<td></td>').text(item.rid);
                    var rusernameTd = $('<td></td>').text(item.rusername);
                    var rpassTd = $('<td></td>').text(item.rpass);
                    var rnameTd = $('<td></td>').text(item.rname);
                    var raddressTd = $('<td></td>').text(item.raddress);
                    var rpermissionTd = $('<td></td>').text(item.rpermission);

                    var updateTd = $('<td></td>').html('<a class="btn btn-info" href="xyxAdministrator/ResPerChange?rusername='+item.rusername+'&rpermission='+item.rpermission+'">修改权限</a>');
                    var deleteTd = $('<td></td>').html('<a class="btn btn-danger" href="WyxAdministor/resDelete?rid='+item.rid+'">删除商家</a>');
                    //每次循环将创建的td追加到tr中
                    rTr.append(ridTd).append(rusernameTd).append(rpassTd).append(rnameTd).append(raddressTd).append(rpermissionTd).append(updateTd).append(deleteTd);
                    //每次循环将创建的tr追加到tbody中
                    $("#display").append(rTr); // 每次修改前端页面都需要重启服务器太浪费时间， 可以考虑热部署
                });


            },
            error:function (eno) {
                console.log(eno);
            }
        });
    });
</script>


</body>
</html>
